<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function createWatermark(text, options = {}) {
        const {
          width = 200,
          height = 100,
          fontSize = 20,
          color = '#000',
          rotate = -20,
        } = options;
        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');

        ctx.translate(width / 2, height / 2);
        ctx.rotate((rotate * Math.PI) / 180);
        ctx.font = `${fontSize}px Arial`;
        ctx.fillStyle = color;
        ctx.textAlign = 'center';
        ctx.fillText(text, 0, 0);

        return canvas.toDataURL('image/png');
      }

      // 使用示例
      const watermarkImage = createWatermark('前端水印', {
        width: 400,
        height: 200,
        fontSize: 24,
        color: '#ccc',
        rotate: -30,
      });
      const watermarkDiv = document.createElement('div');
      watermarkDiv.style.position = 'absolute';
      watermarkDiv.style.top = '0';
      watermarkDiv.style.left = '0';
      watermarkDiv.style.width = '100%';
      watermarkDiv.style.height = '100%';
      watermarkDiv.style.backgroundImage = `url("${watermarkImage}")`;
      watermarkDiv.style.backgroundRepeat = 'repeat';
      document.body.appendChild(watermarkDiv);
    </script>
  </body>
</html>
